<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="微博,中国Twitter">
    <meta name="description" content="微博是新浪旗下最大的SNS社交服务平台">
    <title>我的首页 微博-随时随地发现新鲜事</title>

    <link rel="shortcut icon" href="/static/img/about_UI/favicon.ico" />
    <link rel="bookmark" href="/static/img/about_UI/favicon.ico" type="image/x-icon"/>

    <link rel="stylesheet" href="/static/css/top_info.css">
    <link rel="stylesheet" href="/static/css/head_band.css">
    <link rel="stylesheet" href="/static/css/threePart.css">

    <script type="text/javascript" src="/static/js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="/static/js/jquery.qqFace.js"></script>
    <script type="text/javascript" src="/static/js/commons.js"></script>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/Font-Awesome-master/css/font-awesome.css">
    <script type="text/javascript" src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <style type="text/css">

        @font-face {
            font-family: "MyNewFont",serif;
            src: url("/static/fonts/Apple-fonts/苹方黑体-中黑-简.ttf");
        }

        *{
            padding: 0;
            margin: 0;
        }
        i{
            cursor: pointer;
        }
        body{
            background-image: url("/static/img/about_UI/skin.png");
            background-size:1366px auto;
            font-family: "MyNewFont","Arial","Microsoft YaHei",serif;
        }
        .clearfix:after{
            content: '.';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
        }
        #cPrompt{
            margin-top: 10px;
            margin-left: 12px;
            color: cornflowerblue;
        }
        .hide{
            display: none;
        }
        .emotion:hover{
            background-position:2px -28px;
        }

        .qqFace{
            margin-top:4px;
            background:#fff;
            padding:2px;
            border:1px #dfe6f6 solid;
        }
        .qqFace table td{
            padding:0;
        }
        .qqFace table td img{
            cursor:pointer;
            border:1px #fff solid;

        }
        .qqFace table td img:hover{
            border:1px #0066cc solid;
        }
        #image{
            /*border: 1px dotted orangered;*/
            /*border: 1px solid black;*/
             height: 70px;
             width: 70px;
             float: left;
             border-radius: 3px;
             margin-top: -66px;
        }
        .addImages:hover{
            border: 2px dotted orangered;
            color: orangered;
        }
        #files{
            font-size: 50px;
            width: 69px;
            height: 66px;
            opacity: 0;
            /*z-index: 99;*/
        }
        .popover-content{
            padding: 2px;
            max-width:218px;
        }
        .returnToTop{
            width: 40px;
            height: 40px;
            background-color: gainsboro;
            position: fixed;
            bottom: 5px;
            right: 5px;
            text-align: center;
            display: none;
        }
        .addImages{
            float:left;
            width:71px;
            height:71px;
            overflow:hidden;
            border: 2px dotted gainsboro;
        }
        .bdsharebuttonbox{
            background-color: gainsboro;
            height: 38px;
            width: 147px;
            margin-left: -4px;
            margin-top: -40px;
        }

    </style>
</head>
<body>
    {% load my_simple_tags %}
    <!--通用页面的展示-->
    {% include "global_handler_page/directory.html" %}
    <!--此为主页面的样式显示-->
    <div class="threePart clearfix">
        <div class="bigMenu clearfix" >
            <div class="list-group">
                <a class="list-group-item" href="/index/">主页</a>
                <a class="list-group-item" href="javascript:void(0);">我的收藏</a>
                <a class="list-group-item" href="javascript:void(0);">我的赞</a>
            </div>
            <div class="list-group">
                <a class="list-group-item" href="javascript:void(0);"><i class="fa fa-fire" style="margin-right:3px; "></i>热门微博</a>
                <a class="list-group-item" href="javascript:void(0);"><i class="fa fa-film"></i>热门视频</a>
            </div>
            <div class="list-group">
                <a class="list-group-item" href="javascript:void(0);"><i class="fa fa-heart"></i>特别关注</a>
                <a class="list-group-item" href="javascript:void(0);"><i class="fa fa-odnoklassniki"></i>同事</a>
                <a class="list-group-item" href="javascript:void(0);"><i class="fa fa-odnoklassniki"></i>同学</a>
                <a class="list-group-item" href="javascript:void(0);"><i class="fa fa-odnoklassniki"></i>媒体</a>
                <a class="list-group-item" href="javascript:void(0);"><i class="fa fa-odnoklassniki"></i>体育</a>
                <a class="list-group-item" href="javascript:void(0);"><i class="fa fa-odnoklassniki"></i>事业</a>
                <a class="list-group-item" href="javascript:void(0);"><i class="fa fa-user-o"></i>群微博</a>
                <a class="list-group-item" href="javascript:void(0);"><i class="fa fa-leaf"></i>悄悄关注</a>
            </div>
        </div>
        <div class="second clearfix">
            <div class="post clearfix">
                <p id="cPrompt">有什么新鲜事想告诉大家?</p>
                <textarea class="input"
                          id="post_text"
                          name="post_text"
                          placeholder="Want to say something?"
                          onkeyup="TextStatusDetect(this);"
                          ></textarea>

                <div class="cEmotion"><i class="fa fa-plus-square emotion" style="cursor: pointer;">表情</i></div>
                <div class="cPhoto">
                    <i class="fa fa-photo" style="cursor: pointer;" data-container="body" data-toggle="popover"
                        data-placement="bottom" data-html="true" title="本地上传"
                        data-content='
                            <h6 style="text-align:center;">已经上传
                                <span style="color:red">0</span>张,还允许
                                <span style="color:red">9</span>张,共9张
                            </h6>
                            <div class="addImages">
                                <form name="upload_weibo_img" class="upload_weibo_img" id="upload_weibo_img" enctype="multipart/form-data">
                                    <input type="file" id="files" name="weiboImg" onchange="PreviewMultipleFile(this);"
                                            accept="image/jpg,image/jpeg,image/png,image/gif" multiple/>
                                    <img id="image" src="/static/img/about_UI/add.png" draggable="true"/>
                                </form>
                            </div>
                        '
                        >图片</i>
                </div>
                <div class="cVideo"><i class="fa fa-film" style="cursor: pointer;">视频</i></div>
                <div class="cTopic"><i class="fa fa-hashtag" style="cursor: pointer;">话题</i></div>
                <div class="cShare">
                    <a class="fa fa-link" style="cursor: pointer;">网页分享</a>
                </div>

                <div class="cMore"><i class="fa fa-bars" style="cursor: pointer;">更多</i></div>

                <div class="cStatus">
                    <div class="dropdown">
                      <span>公开</span>
                      <i class="fa fa-angle-down" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                      <ul class="dropdown-menu" aria-labelledby="dLabel">
                        <li onclick="TogglePostStatus(this);">公开</li>
                        <li onclick="TogglePostStatus(this);">仅自己可见</li>
                        <li onclick="TogglePostStatus(this);">好友圈可见</li>
                      </ul>
                    </div>
                </div>
                <div class="cSubmit"><button onclick="PostMessage(this);">发布</button></div>
            </div>

            <div class="messageShow  clearfix">

                {% for weibo_item in detail_list %}
                    <div class="show1">
                        <div style="float: right;margin: 10px; color: grey;">
                            <div class="dropdown">
                              <i class="fa fa-angle-down fa-2x" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                              <ul class="dropdown-menu"
                                    aria-labelledby="dLabel"
                                        style="margin:-7px -91px 1px;min-width: 105px;">
                                <li>帮上头条</li>
                                <li>屏蔽这条微博</li>
                                <li>屏蔽此用户</li>
                                <li>取消关注此用户</li>
                                <li>取消举报</li>
                                <li weibo_id="{{weibo_item.id}}"
                                    PostMan="{{ weibo_item.user__username}}"
                                    onclick="DeleteMyWeibo(this);">删除微博</li>
                              </ul>
                            </div>
                        </div>
                        <div class="briefShow">
                            <img src="/{{weibo_item.user__head_img}}" id="photo_identity" class="img-rounded">
                            <p style="font-weight: bold;font-size: 18px;margin-left: 60px;margin-bottom: 3px;">{{ weibo_item.user__username}}</p>
                            <p style="margin-left: 60px;">{{ weibo_item.date }}</p>
                        </div>

                        <div class="textShow">
                             <p id="text_show" class="text_show" style="word-break:break-all;">{{weibo_item.text}}</p>
                             <div id="photo_show" style="width: 350px;">
                                 {% for photo_item in photo_list %}
                                    {% ifequal photo_item.picture_link_id  weibo_item.id %}
                                    <img src="/{{photo_item.picture_content}}"
                                                style="width: 110px;height: 110px;border: 1px solid lightgrey;margin: 1px;"
                                                    alt="noPhoto">
                                    {% endifequal %}
                                 {% endfor %}
                             </div>
                        </div>

                        <div class="weibo_menu">
                            <dd id="icollect"
                                weibo_id="{{weibo_item.id}}"
                                currentUser="{{item.username}}"
                                likeStatus="{{0}}"
                                onclick="ToggleLikeStatus(this)">
                                <i class="fa fa-star-o">收藏</i>
                            </dd>

                            <dd id="icomment" target="{{weibo_item.id}}" onclick="ToggleCommentArea(this)">
                                <i class="fa fa-comment-o">评论</i>
                            </dd>

                            <dd id="ishare" >
                                <i class="fa fa-share-alt">分享</i>
                                <div class="bdsharebuttonbox" style="opacity: 0;">
                                    <a href="#" class="bds_more" data-cmd="more"
                                        style="height: 38px;
                                               width: 70px;
                                               margin-top:0px;
                                               margin-left: 40px;
                                               border: 1px solid red;
                                               overflow: hidden;">
                                    </a>
                                </div>
                            </dd>

                            <!--这里需要一个动态生成的点赞状态,这样意味着只能实现一次反转-->

                            {% for item in user_list %}

                            <dd id="ilike"
                                weibo_id="{{weibo_item.id}}"
                                currentUser="{{item.username}}"
                                likeStatus="{{0}}"
                                onclick="ToggleLikeStatus(this)">

                                <i class="fa fa-thumbs-o-up">点赞</i>

                            </dd>
                            {% endfor %}
                        </div>

                        <div class="commentInfo hide">
                            <div class="commentPlace">
                                {% for user_item in user_list%}
                                <div class="set_myComment">
                                    <img src="/{{user_item.head_img}}" style="width: 30px;height: 30px;border: 1px solid grey;">
                                    <input type="text" style="width: 518px;height: 30px;"/>
                                    <button weibo_id="{{weibo_item.id}}" target="{{user_item.id}}" onclick="setComment(this);" class="btn btn-default" style="margin: 15px;float: right;">评论</button>
                                </div>
                                <div class="sortWay">
                                    <span>按热度</span>
                                    <span>按时间</span>
                                </div>
                                {% endfor %}

                                <div class="get_allComment" id="commentZone">

                                </div>
                            </div>
                        </div>

                    </div>
                {% endfor%}
            </div>

        </div>
        <div class="more clearfix">
            <div class="personal clearfix">
                {% for item in user_list %}
                <div class="personal_photo">
                    <a href="/user_profile/">
                    <img src="/{{item.head_img}}"
                        class="img-rounded"
                            style="float:left;width: 60px;height: 60px;border-radius:26px;position:relative;left:87px;top:35px;border: 1px solid white;">
                    </a>
                </div>
                <div class="personal_detail">

                    <div class="logined_user">{{ item.username}}</div>

                    <div class="follows_fans">
                        <dl >
                            <dt>{{follows.follows}}</dt>
                            <dd>关注</dd>
                        </dl>
                        <dl>
                            <dt>{{fans_num}}</dt>
                            <dd>粉丝</dd>
                        </dl>
                        <dl style="border: none;">
                            <dt>{{weibo_num.weibo_num}}</dt>
                            <dd>微博</dd>
                        </dl>
                    </div>

                </div>
                {% endfor %}
            </div>
            <div class="topicList">
                <div class="hotTopic">
                    <span style="float: left">热门话题</span>
                    <span style="float: right"><i class="fa fa-refresh"></i>换一换</span>
                </div>
                <div class="topicShow">
                    <ul>
                        {% for item in topic_info %}
                        <li class="clearfix" style="list-style: none;">
                            <span style="padding-left:12px;float: left;padding-bottom: 4px;padding-top: 4px;">{{item.name}}</span>
                            <span style="float: right;margin-right: 3px;">{{item.readers}}</span>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                <div style="width: 233px;height: 48px;border-top: 1px solid grey;">
                    <span style="line-height: 48px;margin-left: 66px;">查看更多<i class="fa fa-angle-right"></i></span>
                </div>
            </div>
        </div>
        <div class="returnToTop">
            <a style="text-decoration: none;color: orangered" href="#">返回顶部</a>
        </div>

    </div>

    <script type="text/javascript">

        $(function(){
            $('.cSubmit button').prop("disabled",true);

            $('[data-toggle="popover"]').popover();//.on('shown.bs.popover',function() {});

            $('.login_register').html("<span class='c5'>欢迎你的到来</span><a class='c6' href='/exit/' >退出登陆</a>");

            $(".text_show").each(function() {
                $(this).html(replace_em($(this).text()));
            });

            $('.emotion').qqFace({
                assign:'post_text', //给输入框赋值
                path:'/static/img/face/'    //表情图片存放的路径
            });

            window.onscroll = function() {
                var length = $(window).scrollTop();
                if(length>768){
                    $('.returnToTop').show();
                }else {
                    $('.returnToTop').hide();
                }
             };

            window._bd_share_config={
                "common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},
                "share":{},
                "image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},
                "selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}
            };
            with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
        });

    </script>

</body>
</html>